<template>
	<div>
		<div class="home"><h1>111111</h1></div>
		<div class="bg1">
			<div class="sec-title">
				<span>SERVICE</span>
				<span>What We Do</span>
				<div class="heading-border-line"></div>
			</div>
			<div class="row">
				<div>
					<div class="services-item">
						<div class="services-icon">
							<div class="image-part" src="@/assets/images/pictures/1.png"></div>
							<div class="hover-img"></div>
						</div>
						<div class="services-content"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// @ is an alias to /src

export default {
	name: 'Home'
};
</script>

<style lang="less">
.home {
	width: 100%;
	height: 500px;
	background: url(../assets/images/index/banner-1.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

.bg1 {
	background: url(../assets/images/index/services-bg.png);
	background-color: #faf3f3;
	background-repeat: no-repeat;
	background-position: center center;
	.sec-title{
		display: flex;
		flex-direction: column;
		.heading-border-line{
			position: relative;
			&:before{
				content: ' ';
				width: 12px;
				height: 4px;
				background: #ce1446;
				position: absolute;
				bottom: -4px;
				left: 50%;
				margin-left: -35px;
				transform: translateX(-50%);
				border-radius: 2px;
				transition: all .3s ease;
				z-index: 1;
			}
			&:after{
				content: ' ';
				width: 65px;
				height: 4px;
				background: #ce1446;
				position: absolute;
				bottom: -4px;
				right: 0;
				left: 50%;
				margin-left: -20px;
				border-radius: 2px;
				-webkit-transition: all .3s ease;
				transition: all .3s ease;
				z-index: 0;
			}
		}
	}
	.row{
		display: flex;
		flex-wrap: wrap;
		margin-left: 15px;
		margin-right: 15px;
		
		.image-part{
			height: 70px;
			width: 70px;
		}
	}
}

</style>
